<template>
  <div class="maincart">
    <div class="navcart">
      <p @click="show1">我的购物车</p>
      <p @click="show2">订单提交成功</p>
    </div>
    <!-- 我的购物车 -->
    <div v-if="com==1">
     <table id="gouwuche">
        <thead >
          <tr class="biaoti">
            <th width="100">
              <input type="checkbox" v-model="isAllCheck" @click="checkAll()" />
              全选
            </th>
            <th width="50" align="center">id</th>
            <th></th>
            <th width="100" align="center">商品名字</th>
            <th width="500" align="center">商品信息</th>
            <th width="100" align="center">单价</th>
            <th width="100" align="center">数量</th>
            <th width="100" align="center">金额</th>
            <th width="100" align="center">操作</th>
          </tr>
        </thead>

        <tbody v-for="(item,index) in goodslist" :key="index">
          <tr align="center">
            <td @click="checkOne(item)">
              <input type="checkbox" v-model="selectgoods" name="selectgoods" :value="item"/>
            </td>
            <td>{{index+1}}</td>
            <td>
              <img :src="require(`../assets/images/${item.photoFile}`)"/>
            </td>
            <td>{{item.name}}</td>
            <td>{{item.details}}</td>
            <td>
              <b>{{item.price}}</b>
            </td>
            <td>
              <button @click="decr(item)">-</button>
              <input type="text" disabled="disabled" v-model="item.nummer" />
              <button @click="incr(item)">+</button>
            </td>

            <td>
              <b>&yen;{{item.nummer*item.price | priceFormat}}</b>
              <!-- 当前价格 -->
            </td>

            <td>
              <button @click="del(item)">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
      <br />
      <div cellpadding="10" cellspacing="0" style="line-height: 50px;">
        <h1 style="font-size: 20px">支付方式:</h1>
        <tr>
          <td>
            <span>
              <img src="../assets/images/支付宝.png" style="width: 50px;height: 50px;"/>
              <input type="radio" name="payType" checked="" value="1" />支付宝
            </span>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span>
              <img src="../assets/images/微信.png" style="width: 50px;height: 50px;"/>
              <input type="radio" name="payType" value="2" />微信
            </span>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span>
              <img src="../assets/images/货到付款.png" style="width: 50px;height: 50px;"/>
              <input type="checkbox" name="payType" value="3" checked="checked" />货到付款
            </span>
          </td>
        </tr>
      </div>
      <div class="box">
        <div class="boxa">
          <div >
            <input type="checkbox" @click="checkAll()" />
            取消全选
          </div>
        </div>
        <div class="boxb">
          <p >已选{{totalNum}}件商品</p>
          <p >合计：{{totalPrice}}元</p>
        </div>

        <div class="boxc">
          <el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
            结&nbsp;&nbsp;算
          </el-button>

          <el-drawer
            title="扫描二维码支付"
            style="text-align: center;font-size: 20px;"
            :visible.sync="drawer"
            :direction="direction"
            :before-close="handleClose">
            <div>
              <img src="../assets/images/zfb.png" style="width: 150px;height: 150px;">
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <img src="../assets/images/wx.png" style="width: 150px;height: 150px;">
            </div>
              <el-button type="danger" plain @click="toConumer">确认支付</el-button>
          </el-drawer>
          <!-- <el-button type="text" @click="jiesuan">结&nbsp;&nbsp;算</el-button> -->
          <!-- <p @click="jiesuan()">结&nbsp;&nbsp;算</p> -->
        </div>

      </div>
    </div>


    <!-- 订单提交成功 -->
    <div v-else-if="com==2">
      <div class="tbd">
      	<table cellspacing="0" cellpadding="1" style="margin-left: 80px;">
      		<tr>
      			<td>
      				<img src="../assets/images/对号.png" style="width: 70px;height: 70px;margin-top: 25px;" >
      			</td>
      			<td style="line-height: 20px;padding: 40px;">
      				<p><b>已支付,订单提交成功</b></p><br />
      				<p>您的订单已成功生成</p><br />
      				<p style="color: #DF5000;cursor: pointer;">您可以在【用户中心】->【我的订单】查看该订单</p>
      			</td>
      		</tr>
      	</table>
      </div>
      <div style="float: right; padding-top: 10px;">
      	<router-link to="/home"><button class="ted">继&nbsp;续&nbsp;购&nbsp;物</button></router-link>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        id:[],              //选中的商品id
        price: 0,           //商品单价
        total: 0,           //小计
        totalPrice: 0.0,    //总价
        totalNum: 0,        //每种商品的数量
        isAllCheck: true,  //是否全选
        goodslist:[],       //商品列表
        selectgoods:[],     //选中商品列表
        com:1,
        drawer: false,
        direction: 'ttb',
      }
    },
    created() {
      this.getList();
    },
    methods:{
      show1(){
        this.com=1
      },
      show2(){
        this.com=2
      },
      // 获取购物车列表
      async getList(){
        let{data:rrr}=await this.$http.post("/aj-findCart",JSON.parse(window.sessionStorage.getItem("rsp")))
        this.goodslist=rrr;
        this.todo()
      },
      // 数量减方法
      async decr(item){
        if(item.nummer==1){
          return alert("不能再减了!")
        }
        await this.$http.post("/aj-decreaseCart",item)
        this.getList();
      },
      // 数量加方法
      async incr(item){
        await this.$http.post("/aj-addCart1",item)
        this.getList();
      },
      // 删除商品
      async del(item){
        await this.$http.post("/aj-deleteCart",item)
        this.getList();
      },
      //总价
      todo(){
        let allprice=0
        let allnum=0
        let newlist=this.selectgoods
        for (let i=0;i<newlist.length;i++){
          allprice+=newlist[i].price*newlist[i].nummer
          allnum+=newlist[i].nummer
        }
        this.totalPrice=allprice
        this.totalNum=allnum
      },
      //单选
      contains(item){
        for(var i=0;i<this.selectgoods.length;i++){
          if (this.selectgoods[i]===item) {
            return true;
          }
        }
        return false;
      },
      getIndex(item){
        let index=0
        for (var i = 0; i < this.selectgoods.length; i++) {

          if (this.selectgoods[i]===item) {
            return index;
          }
          index++
        }
      },
      checkOne(item){
        if(this.contains(item)){
          let index=this.getIndex(item)
          this.selectgoods.splice(index,1)
        }else{
          this.selectgoods.push(item)
        }
        if (this.selectgoods.length===this.goodslist.length) {
          this.isAllCheck=true;
        } else{
          this.isAllCheck=false;
        }
        console.log(this.selectgoods)
        this.todo()
      },
      //全选与全不选
      checkAll(){
        this.isAllCheck=!this.isAllCheck;
        if (this.isAllCheck) {
          this.selectgoods=[];
          this.goodslist.forEach((item)=>{
            this.selectgoods.push(item)
          })
        } else{
          this.selectgoods=[];
        }
        this.todo()
      },
      //结算
      handleClose(done) {
        this.$confirm('确认关闭支付页面？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      async toConumer(){
        this.$http.post("/aj-deleteAllCart",JSON.parse(window.sessionStorage.getItem("rsp")))
        this.drawer=false
        this.com=2
      }
    }
  }
</script>

<style>
 .maincart {
   margin: 0 auto;
   overflow: hidden;
    width: 1200px;
  }
  #gouwuche {
    width: 1200px;
    height: 50px;
    border: 1px;

  }

  .box {
    height: 50px;
    margin: 30px auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #C4E3F3;
  }

  .boxa {
    width: 780px;
    height: 50px;
  }

  .boxb {
    width: 300px;
    height: 50px;
    display: flex;
    text-align-items: center;
    justify-content: space-between;
  }

  .boxc p{
    width: 120px;
    height: 50px;
    background-color: #ff0000;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
  }

  input {
    width: 50px;
    text-align: center;
  }

  h1 {
    width: 100%;
    height: 100%;
    color: #000000;
    line-height: 45px;
    font-size: 16px;
  }

  a {
    text-decoration: none;
    color: #000;
  }

  .bgcolor {
    background-color: rgba(255, 0, 0, 0.2);

  }

  .navcart {
    height: 41px;
    border-top: 3px solid #ff8500;
    border-bottom: 1px solid #edeef0;
    background-color: #f3fcf2;
    line-height: 41px;
  }

  .navcart p {
    /* a属于行内元素 此时必须要转换 行内块元素 */
    display: inline-block;
    height: 41px;
    width: 220px;
    /* 鼠标放上面是小手 */
    cursor: pointer;
    /* 内边距:上下为0,左右为50 */
    padding: 0 50px;
    text-align: center;
    font-size: 20px;
    color: #4c4c4c;
    /* 取消下划线 */
    text-decoration: none;
  }

  .navcart p:hover {
    background-color: #eee;
    color: #ff8500;
  }

  from ul{
  	list-style:none;
  	padding-left: 50px;
  	line-height: 50px;
  	font-size: 10px;
  }
  .thd {
  	height: 41px;
  	width: 1000px;
  	border-top: 1px solid #edeef0;
  	border-bottom: 3px solid #ff8500;
  	background-color: #f3fcf2;
  	line-height: 41px;
  }

  .thd a {
  	/* a属于行内元素 此时必须要转换 行内块元素 */
  	display: inline-block;
  	height: 41px;
  	/* 内边距:上下为0,左右为20 */
  	padding: 0 50px;
  	font-size: 20px;
  	color: #4c4c4c;
  	/* 取消下划线 */
  	text-decoration: none;
  }

  .thd a:hover {
  	background-color: #eee;
  	color: #ff8500;
  }

  .tbd {
  	height: 200px;
  	width: 1000px;
  	font-size: 15px;
  	background-color: lightgrey;

  }
  .ted {
  	width: 200px;
  	height: 50px;
  	font-size: 20px;
  	cursor: pointer;
  	background-color: #ff0000;
  	color: #ffffff;
  }
  table img {
   width: 30px;
   height: 30px;
   padding-left: 60px;
  }
</style>
